<template>
	<view class="rf-notice-detail">
		<view class="share">
			<rf-tag type="gray" size="small" tui-tag-class="tui-tag-share tui-size" shape="circleLeft">
				<button class="share-btn" open-type="share" :class="'text-' + themeColor.name" @tap.stop="share()">
					<text class="iconfont iconfenxiang"></text>
					<text class="tui-share-text tui-gray">分享</text>
				</button>
			</rf-tag>
		</view>

		<view class="banner" v-if="announceDetail.imgPath">
			<rf-image class="banner-img" :src="baseUrl +'/upload/'+announceDetail.imgPath"></rf-image>

			<view class="banner-title in2line">{{ announceDetail.title }}</view>
		</view>
		<view class="banner-title" v-if="!announceDetail.imgPath">{{
			announceDetail.title
			
		}}</view>
		<view class="article-meta" v-if="announceDetail.createTime ">
			<text class="article-author">{{ announceDetail.creatorName }}</text>
			<text class="article-text">发布于</text>
			<text class="article-time">{{ announceDetail.createTime  }}</text>
		</view>
		<view class="article-content">
			<rf-parser lazy-load :html="announceDetail.contextHtml | filterHtml"></rf-parser>
		</view>
		<rf-empty info="暂无公告详情" v-if="!announceDetail && !loading"></rf-empty>

	</view>
</template>

<script>
	const DETAIL_PAGE_PATH = '/pages/news-detail/news-detail';

	import htmlParser from '@/common/html-parser'
	import {
		knowledgeList,
		knowledgeView
	} from '@/api/basic';
	import iConfig from '@/config/index.config';
	import rfImage from '@/components/rf-image/rf-image'
	String.prototype.replaceAll = function(s1, s2) {
		return this.replace(new RegExp(s1, "gm"), s2);
	}

	function _handleShareChannels(provider) {
		let channels = [];
		for (let i = 0, len = provider.length; i < len; i++) {
			switch (provider[i]) {
				case 'weixin':
					channels.push({
						text: '分享到微信好友',
						id: 'weixin',
						sort: 0
					});
					channels.push({
						text: '分享到微信朋友圈',
						id: 'weixin',
						sort: 1
					});
					break;
				default:
					break;
			}
		}
		channels.sort(function(x, y) {
			return x.sort - y.sort;
		});
		return channels;
	}

	export default {
		data() {
			return {
				title: '',
				announceDetail: {},
				userInfo: {},
				baseUrl: this.$mConfig.baseUrl,
				errorImage: this.$mAssetsPath.errorImage,
				currentUrl: '',
				docId: ''
			}
		},
		components: {
			rfImage
		},
		computed: {
			parserHtml() {
				let html = '';
				if (this.announceDetail.contextHtml) {
					let replacePath = '';
					if (iConfig.ueditorPath.indexOf('static') > -1) {
						replacePath = `/${iConfig.ueditorPath}`
					} else {
						replacePath = `${iConfig.ueditorPath}`
					}
					html = this.announceDetail.contextHtml;

					html = html.replaceAll("\/sdcc_sdjx", iConfig.baseUrl); //如果部署在sdcc_sdjx下使用此方法
					html = html.replaceAll("static/ueditor", iConfig.baseUrl + replacePath);
				}
				return html;

			}
		},
		filters: {
			filterHtml(html) {
				if (html) {
					html = html.replaceAll("\/sdcc_home_v4", iConfig.baseUrl); //如果部署在sdcc_sdjx下使用此方法
					//html = html.replaceAll("/ueditor",iConfig.baseUrl+'/ueditor');    //如果部署在ROOT下，使用此方法
					html = html.replaceAll("static/ueditor", iConfig.baseUrl + '/static/ueditor');
				}
				return html;

			}
		},
		onLoad(event) {
			this.userInfo = uni.getStorageSync('userInfo');
			console.log("event: " + JSON.stringify(event));
			this.docId = event.id;
			this.currentUrl = `${this.$mConfig.hostUrl}/pages/zhyl/knowledge/detail?id=${this.docId}`;
			this.getDetail();
		},
		onPullDownRefresh() {
			this.getDetail('refresh');
		},
		onShareAppMessage() {
			return {
				title: this.banner.title,
				//path: DETAIL_PAGE_PATH + '?detailDate=' + JSON.stringify(this.banner)
				path: `/pages/zhyl/knowledge/detail?id=${this.docId}`
			}
		},
		onNavigationBarButtonTap(event) {
			const buttonIndex = event.index;
			if (buttonIndex === 0) {
				// 分享 H5 的页面
				const shareProviders = [];
				uni.getProvider({
					service: 'share',
					success: (result) => {
						// 目前仅考虑分享到微信
						if (result.provider && result.provider.length && ~result.provider.indexOf('weixin')) {
							const channels = _handleShareChannels(result.provider);
							uni.showActionSheet({
								itemList: channels.map(channel => {
									return channel.text;
								}),
								success: (result) => {
									const tapIndex = result.tapIndex;
									uni.share({
										provider: 'weixin',
										type: 0,
										title: this.banner.title,
										scene: tapIndex === 0 ? 'WXSceneSession' : 'WXSenceTimeline',
										href: 'https://uniapp.dcloud.io/h5' + DETAIL_PAGE_PATH + '?detailDate=' + JSON.stringify(this.banner),
										imageUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/app/share-logo@3.png'
									});
								}
							});
						} else {
							uni.showToast({
								title: '未检测到可用的微信分享服务'
							});
						}
					},
					fail: (error) => {
						uni.showToast({
							title: '获取分享服务失败'
						});
					}
				});
			}
		},
		methods: {
			// 分享商品
			share() {
				// #ifdef H5
				if (this.$mPayment.isWechat()) {
					this.shareClass = 'show';
				} else {
					this.$mHelper.h5Copy(this.currentUrl);
				}
				// #endif
				// #ifdef APP-PLUS
				this.$mHelper.handleAppShare(this.currentUrl, this.$mConstDataConfig.appName, this.announceDetail.title, this.baseUrl +
					'/upload/' + this.announceDetail.imgPath);
				// #endif
			},
			getDetail(type) {

				let corpId = 10;
				if (this.userInfo && this.userInfo.corpId)
					corpId = this.userInfo.corpId;

				this.$http
					.get(`${knowledgeView}`, {
						corpId: corpId,
						docId: this.docId
					})
					.then(async r => {
						console.log("r.data: " + JSON.stringify(r.data));
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						// TODO 后面把参数名替换成 payload
						//const payload = event.detailDate || event.payload;
						// 目前在某些平台参数会被主动 decode，暂时这样处理。
						//console.log("payload: " + JSON.stringify(payload));
						//try {
						//	this.banner = JSON.parse(decodeURIComponent(payload));
						//} catch (error) {
						this.banner = r.data;
						//}
						uni.setNavigationBarTitle({
							title: this.banner.title
						});
						this.announceDetail = r.data;


					}).catch((e) => {
						//console.log('fail' + JSON.stringify(e));

					});

			}
		}
	}
</script>

<style lang="scss">
	.rf-notice-detail {
		.banner {
			overflow: hidden;
			position: relative;
			background-color: #ccc;

			.banner-img {
				height: 300upx;
				width: 100%;
			}

			.banner-title {
				max-height: 84upx;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 32upx;
				font-weight: 400;
				line-height: 42upx;
				color: white;
				z-index: 11;
				background-color: rgba(0, 0, 0, 0.25);
				padding: 4upx 20upx;
			}
		}

		.banner-title {
			padding: $spacing-lg $spacing-lg 0;
			font-size: $font-lg;
		}

		.article-meta {
			padding: 20upx 40upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			color: gray;

			.article-text {
				font-size: 26upx;
				line-height: 50upx;
				margin: 0 20upx;
			}

			.article-author,
			.article-time {
				font-size: 30upx;
			}
		}

		.article-content {
			padding: 0 30upx;
			overflow: hidden;
			font-size: 30upx;
			margin-bottom: 30upx;
		}
	}
</style>
